<template>
  <div>
      <div class="menu">
          <div class="menu-left">
              <ul>
                  <li class="menu-item" v-for="(menu,index) in menus" :key="index" :class="{current: index === currentIndex}" @click="clickList(index)" ref="menuList">
                      <p class="text">{{ menu.name }}</p>
                  </li>
              </ul>
          </div>
          <div class="menu-right" ref="itemList">
              <ul>
                  <li class="cate" v-for="(menu, index1) in menus" :key="index1">
                      <h4 class="cate-title">{{ menu.name }}</h4>
                      <ul class="cate-item">
                          <li v-for="(item, index2) in menu.sub" :key="index2">
                              <a href="#" class="cate-item-wrapper">
                                  <router-link class="cate-item-wrapper" :to="{name: 'goods_list', params: {category_id: item.id}}">
                                      <div class="cate-item-img">
                                          <img :src="item.image" alt="">
                                      </div>
                                      <span>{{ item.name }}</span>
                                  </router-link>    
                              </a>
                          </li>
                      </ul>
                  </li>
                  <li class="cate-bottom"></li>
              </ul>
          </div>
      </div>
   </div>
  </template>
  
  <script>
  import BScroll from 'better-scroll'
  export default {
      data () {
          return {
          menus: [],
          rightLiTops: [],
          scrollY: 0
          }
      },
      computed: {
          currentIndex () {
              // 当 scrollY 发生改变时，修改左菜单的激活项
              const {scrollY, rightLiTops} = this
              // 从右菜单中查找元素，返回元素索引
              return rightLiTops.findIndex((top, index) => {
                  if (index === rightLiTops.length - 2) {
                      return true
                  }
                  if (scrollY >= top && scrollY < rightLiTops[index + 1]) {
                      this._initLeftScroll(index)
                      return true
                  }
              })
          }
      },
      methods: {
          clickList (index) {
              this.scrollY = this.rightLiTops[index]
              // scrollTo(x, y, time, easing)
              this.rightBscroll.scrollTo(0, -this.rightLiTops[index])
          },
          _initBScroll() {
              this.leftBscroll = new BScroll('.menu-left', {
                  click: true,
                  mouseWheel: true
              })
              this.rightBscroll = new BScroll('.menu-right', {
                  click: true,
                  mouseWheel: true,
                  probeType: 3
              })
              this.rightBscroll.on('scroll', (pos) => {
                  this.scrollY = Math.abs(pos.y)
              })
          },
          _initRightHeight() {
              let itemArray = []
              let top = 0
              itemArray.push(top)
              let allList = this.$refs.itemList.getElementsByClassName('cate')
              // 将 allList 转换为普通数组进行遍历，记录每个元素的高度
              Array.prototype.slice.call(allList).forEach(li => {
                  top += li.clientHeight
                  itemArray.push(top)
              })
              let bottom = this.$refs.itemList.getElementsByClassName('cate-bottom')[0]
              bottom.style.height = this.$refs.itemList.clientHeight / 1.2 + 'px'
              this.rightLiTops = itemArray
          },
          _initLeftScroll (index) {
              let menu = this.$refs.menuList
              let el = menu[index]
              // scrollToElement(el, time, offsetX, offsetY, easing)
              this.leftBscroll.scrollToElement(el, 300, 0, -100)
          }
      },
      created () {
          this.$indicator.open({
          text: '加载中'
          })
          this.$http.get('category').then(res => {
          this.$indicator.close()
          this.menus = res.data.data
          })
      },
      watch: {
          menus () {
              // $nextTick用来在下次DOM更新循环结束之后执行延迟回调
              this.$nextTick(() => {
              this._initBScroll()      // 初始化better-scroll
              this._initRightHeight()
              })
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .menu {
    display: flex;
    position: absolute;
    text-align: center;
    top: 40px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
    .menu-left {
      flex: 0 0 80px;
      width: 80px;
      background: #f3f5f7;
      .menu-item {
        height: 54px;
        width: 100%;
        .text {
          width: 100%;
          line-height: 54px;
          margin-bottom: 0;
        }
      }
      .current {
        width: 100%;
        background: #fff;
        .text {
          color: red;
        }
      }
    }
    .menu-right {
      flex: 1;
      background: #fff;
      .cate {
      height: 100%;
      .cate-title {
         margin: 0;
        text-align: left;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
      .cate-item {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
        li {
          width: 33.3%;
          .cate-item-wrapper {
            .cate-item-img {
              width: 100%;
              img {
                width: 70px;
                height: 70px;
              }
            }
            span {
              display: inline-block;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }
  
    }
  }
  </style>